<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>XX培训网</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/static/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="/static/css/sm.css">
    <link rel="stylesheet" href="/static/css/sm.min.css">
    <link rel="stylesheet" href="/static/css/sm-extend.min.css">


    <!--icon css-->
<!--    <link rel="stylesheet" href="/static/css/icon-style.css">-->
    <style>
        .tc {
            width: 100%;
            height: 2.5rem;
        }
        p {
            margin: 0.1rem 0 !important;
        }

        .content-padded {
            padding: 0.2rem 0;
            background: white;
            border-radius: 0.3rem;
        }

        .card {
            width: 47% !important;
            border-radius: 0.3rem;
            float: left;
            margin: 0 0 3% 3%;
        }

        .card-footer, .card-header {
            padding: 0.3rem !important;
        }

        .card-footer:before {
            left: auto;
            width: 90%;
        }

        .row > .col-33:active {
            background: gainsboro;
        }
    </style>
</head>

<body>
<!-- 头部-->
<header class="bar bar-nav">
    <a class="icon icon-left pull-left" href="javascript:window.history.back(-1);"></a>
    <h1 class="title">我的兴趣班</h1>
</header>
<!-- 搜索-->
<!--<div class="bar bar-header-secondary">-->
<!--    <div class="searchbar">-->
<!--        <a class="searchbar-cancel">取消</a>-->
<!--        <div class="search-input">-->
<!--            <label class="icon icon-search" for="search"></label>-->
<!--            <input type="search" id='search' onblur="searchGoods()" placeholder='输入关键字...'/>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<div class="content pull-to-refresh-content infinite-scroll infinite-scroll-bottom native-scroll"
     data-ptr-distance="55" data-distance="100">

    <!-- 默认的下拉刷新层 -->
    <div class="pull-to-refresh-layer">
        <div class="preloader"></div>
        <div class="pull-to-refresh-arrow"></div>
    </div>

<!--    <div class="content-padded">-->
<!--        <div class="row text-center type">-->
<!--            &lt;!&ndash;分类区&ndash;&gt;-->
<!--        </div>-->
<!--    </div>-->

    <div class="padding-xs">我的兴趣班</div>
    <div class="content-padded">
        <div class="row text-center inteClass">
            <!--兴趣班区-->
        </div>
    </div>

<!--    <div class="padding-xs">最近在学资料</div>-->
<!--    <div class="list-block media-list inset goods" style="margin: 0.5rem">-->
<!--        &lt;!&ndash;最近在学资料区&ndash;&gt;-->
<!--    </div>-->

<!--    &lt;!&ndash; 加载更多按钮 &ndash;&gt;-->
<!--    <div class="loadMore text-center" style="height: 1.5rem;line-height: 1.5rem;display: none;cursor:pointer"><a>加载更多...</a></div>-->

<!--    &lt;!&ndash;填充区&ndash;&gt;-->
<!--    <div class="tc"></div>-->
</div>


<!--<nav class="bar bar-tab">-->
<!--    <nav class="bar bar-tab">-->
<!--        <a class="tab-item active" href="/page/indexPage">-->
<!--            <span class="icon icon-home"></span>-->
<!--            <span class="tab-label">首页</span>-->
<!--        </a>-->
<!--        <a class="tab-item" href="/page/setting">-->
<!--            <span class="icon icon-user"></span>-->
<!--            <span class="tab-label">我的信息</span>-->
<!--        </a>-->
<!--    </nav>-->
<!--</nav>-->

<script type='text/javascript' src='/static/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='/static/js/sm-extend.js' charset='utf-8'></script>
<script type="text/javascript" src="/static/js/deatilPage.js"></script>
<script type="text/javascript">
    //    页面初始化
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));

    var pn = 1;
    var pageSize = 10;
    var keyWords = $('#search').val();

    $(document).ready(function () {

        if(!userInfo||userInfo == {}){
            $.alert('您未登录，点击确定去登录', '提示', function(){
                loginPage();
            })
            return false;
        }
        // initType();
        // initGoods();
        initInteClass();
    });

    //    初始化兴趣分类
    function initType() {
        $.ajax({
            url: '/back/interest/list',
            type: 'get',
            dataType: 'json',
            success: function (re) {
                var data = re.data;
                if (!re.status) {
                    var result = '';
                    for (var i = 0; i < 3; i++) {
                        result += "<div class=\"col-25 margin-top-xs\" onclick='cateDetailPage("+data[i].id+")'>\n" +
                            "                <img src='" + data[i].icon + "' onerror=\"this.src='/static/img/loadFail.png';this.onerror='null' \" style=\"width: 2rem\"  title='"+data[i].detail+"'/>" +
                            "                <div>" + data[i].name + "</div>\n" +
                            "            </div>";
                    }
                    result += "<div class=\"col-25 margin-top-xs\" onclick='cateDetailPage()'>\n" +
                        "                <img src='" + data[i].icon + "' onerror=\"this.src='/static/img/loadFail.png';this.onerror='null' \" style=\"width: 2rem\"  title='"+data[i].detail+"'/>" +
                        "                <div>更多</div>\n" +
                        "            </div>";
                    $('.type').html(result);
                }
            }
        })
    }

    //兴趣班详情跳转
    function matDetailPage(id) {
        var url = 'matDetailPage?id='+id ;
        window.location.href=url;
    }

    /**
     * 初始化兴趣班
     */
    function initInteClass(){
        $.ajax({
            url: '/front/user/myInteClass',
            type: 'get',
            dataType: 'json',
            data:{
                userId:userInfo.id
            },
            success: function (re) {

                var data = re.data;
                if (!re.status) {
                    var result = '';
                    if(!data||data.length<1){
                        $('.inteClass').html('您还没有报过兴趣班哦！');
                        return false;
                    }
                    for (var i = 0; i < data.length; i++) {
                        result += "<div class=\"col-25 margin-top-xs\" onclick='classDetailPage("+data[i].id+")'>\n" +
                            "                <img src='" + data[i].icon + "' onerror=\"this.src='/static/img/loadFail.png';this.onerror='null' \" style=\"width: 2rem\"  title='"+data[i].detail+"'/>" +
                            "                <div>" + data[i].name + "</div>\n" +
                            "            </div>";
                    }
                    $('.inteClass').html(result);
                }
            }
        })
    }
    //兴趣班详情跳转
    function classDetailPage(id) {
        var url = 'classDetailUI?id='+id;
        window.location.href=url;
    }

    //    加载更多
    $('.loadMore').click(function () {
        $('.loadMore').hide();
    var tishi = "<div class=\"infinite-scroll-preloader\">\n" +
        "        <div class=\"preloader\"></div>\n" +
        "    </div>"
        $('.goods').after(tishi);
        setTimeout(function () {
            initGoods();
            $('.infinite-scroll-preloader').remove();
            $('.loadMore').show();
        },300);
    });


    //  初始化学习资料
    function initGoods(){
        $.ajax({
            url: '/front/user/myMaterialList',
            type: 'get',
            dataType: 'json',
            data: {
                'pn':pn,
                'pageSize': pageSize,
                'userId': userInfo.id
            },
            success: function (re) {
                var data = re.data.list;
                if (!re.status) {
                    var result = '';
                    for (var i = 0; i < data.length; i++) {
                        var star = new Array();//新建一个数组，
                        star = data[i].img_url.split(',');
                        result += "<ul style='margin-top: 0.5rem'>\n" +
                            "	<li>\n" +
                            "			<a href=\"#\" onclick = 'matDetailPage("+data[i].id+")' class=\"item-link item-content\">\n" +
                            "					<div class=\"item-media\"><img src="+star[0]+" style='width: 2.2rem;'></div>\n" +
                            "					<div class=\"item-inner\">\n" +
                            "							<div class=\"item-title-row\">\n" +
                            "									<div class=\"item-title\">"+data[i].title+"</div>\n" +
                            "							</div>\n" +
                            "							<div class=\"item-subtitle\">"+
                            "                                   <span class=\"icon-books\" style='margin-right: 0.3rem'></span>学习次数: "+data[i].num+
                            "                           </div>\n" +
                            "					</div>\n" +
                            "			</a>\n" +
                            "	</li>\n" +
                            "</ul>";
                    }
                    $('.goods').append(result);
                    $('.loadMore').show();
                    pn++;
                }
                if(!re.data.nextPage){
                    // 删除加载提示符
                    $('.infinite-scroll-preloader').remove();
                    $('.loadMore').remove();
                    //添加已经加载完毕提示符
                    $('.goods').after('<div class="tc text-center">已没有更多在学资料</div>')
                }
            }
        })
    }
</script>
</body>
</html>
